<template>
  <div id="solution">
    <div class="banner">
      <img
        src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/banner_solution.png"
        width="100%"
      />
    </div>
    <div class="titletxt" style="margin-top: 3.6rem; margin-bottom: 4.5rem">
      <h5>满足各行业多场景应用</h5>
      <span>助力企业解决营销关键点</span>
    </div>
    <ul class="colorbox">
      <li class="li1">
        <div>
          <div class="colortxt">自媒体吸粉与快速</div>
          <div class="colortxt">变现</div>
          <p>优惠的权益产品不仅可以吸引用户关注，还可以获得流量与潜在用户</p>
        </div>
        <img src="@/assets/icon/color1.png" />
      </li>
      <li class="li2">
        <div>
          <div class="colortxt">节约企业福利发放</div>
          <div class="colortxt">成本</div>
          <p>企业福利多元化组合，让福利发放不再烦恼，年轻、时尚、便捷</p>
        </div>
        <img src="@/assets/icon/color2.png" />
      </li>
      <li class="li3">
        <div>
          <div class="colortxt">APP、小程序积分</div>
          <div class="colortxt">兑换</div>
          <p>接入权益兑换，让用户多一份惊喜，增强用户转化率和粘性</p>
        </div>
        <img src="@/assets/icon/color3.png" />
      </li>
      <li class="li4">
        <div>
          <div class="colortxt">API充值接口安全</div>
          <div class="colortxt">稳定</div>
          <p>
            API应用程序标准接口&SaaS权益平台高频权益场景植入、权益平台功能完整提供、用户生命周期经营
          </p>
        </div>
        <img src="@/assets/icon/color4.png" />
      </li>
      <li class="li5">
        <div>
          <div class="colortxt">电商、银行、集团、供货</div>
          <div class="colortxt" style="visibility: hidden">.</div>
          <p>累计服务300+泛金融行业客户合作提供金融企业级的专业场景营销服务</p>
        </div>
        <img src="@/assets/icon/color5.png" />
      </li>
    </ul>
    <div class="programme" style="background-color: #f5f5f5">
      <div class="titletxt">
        <h5>企业精细化营销</h5>
        <span
          >通过客户画像，在策略、运营和场景等多个方面进行精准分析，<br />
          针对性营销，把握增长营销策略。</span
        >
      </div>
      <div class="ulbox">
        <ul class="programme_ul">
          <li>
            <span>延展延展目标人群驱动营销</span>
            <div class="line"></div>
            <p>
              瞄准行业核心人群、渗透下沉市场以及细分长尾人群(小镇青年、Z
              世代等）。
            </p>
          </li>
          <li>
            <span>高频场景营销</span>
            <div class="line"></div>
            <p>
              识别用户消费频率高的产品频率，通过挖掘细分场景需求，打造关联场景进行营销渗透，弥补金融场景客户黏性不足的弱势。
            </p>
          </li>
          <li>
            <span>延展延展目标人群驱动营销</span>
            <div class="line"></div>
            <p>联动热门品牌、附近商圈共同营销，对用户进行全方位触达。</p>
          </li>
        </ul>
        <img
          src="@/assets/icon/programme_icon5.png"
          style="width: 56.1rem; height: 51.8rem; margin-left: 8rem"
        />
      </div>
    </div>
    <div class="programme" style="background-color: #ffffff">
      <div class="titletxt">
        <h5>助力打造场景金融生态圈</h5>
        <span
          >围绕用户的需求，打造高黏性的场景服务，帮助金融企业完善场景生态，
          <br />实现营销与需求的无缝连接。</span
        >
      </div>
      <div class="ulbox">
        <img
          src="@/assets/icon/programme_icon6.png"
          style="width: 62.5rem; height: 51.9rem; margin-right: 8rem"
        />
        <ul class="programme_ul">
          <li>
            <span>基于各种需求的场景服务</span>
            <div class="line"></div>
            <p>如日常生活充值、餐饮美食、超市便利、京东优选......</p>
          </li>
          <li>
            <span>基于细分群体的场景服务</span>
            <div class="line"></div>
            <p>
              如新锐白领、资深中产、精致妈妈、小镇青年、Gen Z
              (Z世代)、都市银发、小镇中老年和都市蓝领、限定区域群体......
            </p>
          </li>
          <li>
            <span>基于不同渠道的场景服务</span>
            <div class="line"></div>
            <p>
              如营业网点用户、客户经理私人用户、对公用户、信用卡用户、网金用户、个金用户.....
            </p>
          </li>
        </ul>
      </div>
    </div>
    <div class="programme" style="background-color: #f5f5f5; height: 85.4rem">
      <div class="titletxt">
        <h5>助力企业数字化营销</h5>
        <span
          >从数字化平台、数据化管理和洞察到用户消费行为精准分析，<br />
          助力企业建立从方法论到实践落地的“数据驱动增长体系”，真正实现数字化营销增长模式。</span
        >
      </div>
      <div class="ulbox">
        <ul class="programme_ul lastul">
          <li>
            <span>平台数字化体系</span>
            <div class="line"></div>
            <p>
              ·立专属数字营销平台，数字化与目标客户及受众群体的触点；<br />
              ·个性化数字营销商品供应链，提供具有吸引力的营销商品，助力用户转化提升；<br />
              ·按业务目标定制营销活动方案，助力企业获客、活客。
            </p>
          </li>
          <li>
            <span>高频场景营销</span>
            <div class="line"></div>
            <p>
              ·用户数据的汇总、管理、识别与合并；<br />
              ·数据的多维度分析，打造用户标签管理体系；<br />
              ·通过数据挖掘，形成精准用户画像。
            </p>
          </li>
          <li>
            <span>延展延展目标人群驱动营销</span>
            <div class="line"></div>
            <p>
              ·洞察客户群体的状态、人群特征和行为偏好；<br />
              ·精细化分析客户购买频次、购买偏好和购买动机；<br />
              ·分析客户群体的增加与流失，掌握核心及长尾用户的状态；<br />
              ·用户成长周期分析，丰富营销手段，更好的拉新、留存和转化。
            </p>
          </li>
        </ul>
        <img
          src="@/assets/icon/programme_icon7.png"
          style="width: 66.2rem; height: 51.1rem; margin-left: 8rem"
        />
      </div>
    </div>
    <div class="guarantee">
      <div class="titletxt">
        <h5>优质服务保障</h5>
        <span>优质的客户体验是我们的第一宗旨</span>
      </div>
      <ul class="num_ul">
        <li class="item1">
          <div class="num_li">
            <span>技术保障</span>
            <div>Technical Support</div>
            <div class="line"></div>

            <ul class="p_div">
              <li>系统自动优选渠道</li>
              <li>百万级日交易触发量</li>
              <li>业务成功率99.99%</li>
            </ul>
          </div>
        </li>
        <li class="item2">
          <div class="num_li">
            <span>运营保障</span>
            <div>Operation Guarantee</div>
            <div class="line"></div>
            <ul class="p_div">
              <li>项目专人负责</li>
              <li>量化营销结果</li>
              <li>个性化营销策</li>
            </ul>
          </div>
        </li>
        <li class="item3">
          <div class="num_li">
            <span>客服服务</span>
            <div>Customer Service</div>
            <div class="line"></div>
            <ul class="p_div">
              <li>支持7x24小时服务</li>
              <li>专属工单处理系统</li>
              <li>大客户服务标准</li>
            </ul>
          </div>
        </li>
        <li class="item4">
          <div class="num_li">
            <span>流程管控</span>
            <div>Process Control</div>
            <div class="line"></div>
            <ul class="p_div">
              <li>总分式账号管控</li>
              <li>图形化数据</li>
              <li>可视化财务管理</li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
    <div class="footer-top">
      <div class="licence-code">
        <ul class="nav">
          <li>首页</li>
          <li>产品与服务</li>
          <li class="active">解决方案</li>
          <li>开放平台</li>
          <li>新闻中心</li>
          <li>关于我们</li>
          <li>联系我们</li>
        </ul>
        <!-- <div>
          <h5 class="about-h55">企业地址</h5>
          <p class="adress">
            南京总公司：南京市秦淮区光华路海福巷90-1号 南报文创园
          </p>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "solution",
};
</script>

<style lang="scss" scoped>
#solution {
  .banner {
    width: 100%;
  }

  .titletxt {
    width: 107.6rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    h5 {
      font-size: 2.4rem;
      color: #000000;
      line-height: 3.1rem;
      font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
      font-weight: 500;
      margin-bottom: 0.3rem;
    }

    span {
      font-size: 1.4rem;
      color: #666666;
      line-height: 1.9rem;
      text-align: center;
    }
  }

  .colorbox {
    display: flex;
    justify-content: center;

    li {
      width: 17%;
      height: 64rem;
      padding: 6rem 0 5rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
      box-sizing: border-box;
      overflow: hidden;

      img {
        width: 27.2rem;
        height: 18.6rem;
        transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .colortxt {
        font-size: 2.1rem;
        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
        font-weight: 700;
        text-align: center;
        color: #ffffff;
        margin-bottom: 1rem;
      }

      p {
        width: 80%;
        height: 7.5rem;
        margin: 0 auto;
        font-size: 1.8rem;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: 400;
        text-align: center;
        color: #ffffff;
        margin-top: 2.8rem;
        line-height: 2.3rem;
      }
    }

    li:hover {
      width: 32%;

      img {
        width: 40.2rem;
        height: 29.4rem;
      }
    }

    .li1 {
      background: #ff8a3b;
    }

    .li2 {
      background: #ffb000;
    }

    .li3 {
      background: #ff7070;
    }

    .li4 {
      background: #42b8e8;
    }

    .li5 {
      background: #30c973;
    }
  }

  .programme {
    width: 100%;
    height: 75.6rem;
    padding-top: 5.5rem;

    .ulbox {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 3.2rem;

      .programme_ul {
        width: 54.7rem;
        height: 51.8rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        li {
          width: 54.7rem;
          height: 11.8rem;
          background: #ffffff;
          border-radius: 1.4rem;
          box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.16);
          padding-left: 2.3rem;
          display: flex;
          flex-direction: column;
          justify-content: center;

          span {
            display: inline-block;
            font-size: 2rem;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: 400;
            text-align: left;
            color: #181818;
          }

          div {
            width: 46.8rem;
            height: 0px;
            border-bottom: 0.1rem solid #e0251b;
            margin: 0.8rem 0 1.3rem 0;
          }

          p {
            width: 48.2rem;
            font-size: 1.4rem;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: 400;
            text-align: left;
            color: #666666;
            line-height: 2.1rem;
          }
        }
      }

      .lastul {
        height: 65rem;

        li {
          height: 17.3rem;
        }
      }
    }
  }

  .guarantee {
    width: 100%;
    height: 57rem;
    background-color: #ffffff;
    padding-top: 7.2rem;

    .num_ul {
      width: 117rem;
      margin: 0 auto;
      display: flex;
      justify-content: space-around;
      margin-top: 3.9rem;
    }

    .num_ul li {
      /*width: 26.6rem;*/
      height: 28.6rem;
      position: relative;
    }

    .num_ul li:hover .num_li {
      height: 28.6rem;
      border-radius: 1.5rem;
      .line {
        width: 6.7rem;
        height: 0px;
        border-bottom: 0.1rem solid #ffffff;
        margin: 1rem 0;
      }
    }

    .num_ul li:hover .num_li .p_div {
      height: 8rem;
      opacity: 1;
    }

    .num_li {
      width: 26.6rem;
      height: 8.5rem;
      opacity: 0.85;
      background: #e0251b;
      overflow: hidden;
      position: absolute;
      bottom: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      color: #ffffff;
      transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
      border-bottom-right-radius: 1.5rem;
      border-bottom-left-radius: 1.5rem;

      span {
        font-size: 2.4rem;
      }

      div {
        font-size: 1.4rem;
        margin-top: 0.5rem;
      }

      .p_div {
        height: 0rem;
        font-size: 1.4rem;
        margin-top: 1.2rem;
        opacity: 0;
        text-align: left;
        list-style: disc inside;

        li {
          height: 3rem;
        }
      }
    }

    .item1 {
      background: require(
        "https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/bg_num5.png"
      );
      background-size: 26.6rem 28.6rem;
      width: 26.6rem;
      height: 28.6rem;
      border-radius: 1.5rem;
    }

    .item2 {
      background: require(
        "https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/bg_num6.png"
      );
      background-size: 26.6rem 28.6rem;
      width: 26.6rem;
      height: 28.6rem;
      border-radius: 1.5rem;
    }

    .item3 {
      background: require(
        "https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/bg_num7.png"
      );
      background-size: 26.6rem 28.6rem;
      width: 26.6rem;
      height: 28.6rem;
      border-radius: 1.5rem;
    }

    .item4 {
      background: require(
        "https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/bg_num8.png"
      );
      background-size: 26.6rem 28.6rem;
      width: 26.6rem;
      height: 28.6rem;
      border-radius: 1.5rem;
    }
  }
}
</style>
